import * as THREE from 'three';
import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js';

/** *
 * 抽奖相关逻辑
 */
const useLayout = (scene: any, render: () => void) => {
  const member = [
    '1111111',
    '12222222',
    '123123123123',
    '123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
    '123123123123123',
  ]; // 参与抽奖的人员信息
  const objects: any[] = []; // 人员dom
  const targets = { sphere: [] }; // 人员dom位置

  /**
   * 创建表格布局和球型布局
   */
  function initLayout() {
    const vector = new THREE.Vector3();
    for (let j = 0, l = member.length; j < l; j++) {
      const phi = Math.acos(-1 + (2 * j) / l);
      const theta = Math.sqrt(l * Math.PI) * phi;
      const element = createCard(member[j], j);
      const object = new CSS3DObject(element);
      object.position.setFromSphericalCoords(800, phi, theta);
      vector.copy(object.position).multiplyScalar(2);
      object.lookAt(vector);

      scene.add(object);
      objects.push(object);
    }
    rotate();
  }

  /**
   * 创建名牌
   */
  function createCard(user: any, id: number) {
    const element = createElement();
    element.id = `card-${id}`;
    element.className = 'number-ele';
    // element.style.backgroundColor = `rgba(0,127,127,${Math.random() * 0.7 + 0.25})`;
    element.appendChild(createElement('symbol', user));
    return element;
  }

  /**
   * 创建元素
   */
  function createElement(css?: string, text?: string) {
    const dom = document.createElement('div');
    dom.className = css || '';
    dom.innerHTML = text || '';
    return dom;
  }
  function rotate() {
    scene.rotation.y = 0;
    const rotateObj = new TWEEN.Tween(scene.rotation);
    rotateObj
      .to(
        {
          y: Math.PI * 6 * 1000,
        },
        3000 * 1000,
      )
      .onUpdate(render)
      // .easing(TWEEN.Easing.Linear)
      .start()
      .onStop(() => {
        scene.rotation.y = 0;
      })
      .onComplete(() => {});
  }

  return { objects, targets, createElement, initLayout };
};

export { useLayout };
